<template>
  <div :id="echarts" :style="getheight" class="backtran"></div>
</template>
<script>
export default {
  name: 'horizontalBar',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.floor(Math.random() * 100000)
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 340
    },
    color: {
      type: Array,
      default: () => [
        'rgba(14,109,236',
        'rgba(255,91,6',
        'rgba(100,255,249',
        'rgba(248,195,248',
        'rgba(110,234,19',
        'rgba(255,168,17',
        'rgba(218,111,227'
      ]
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        title: {
          text: this.title,
          textStyle: {
            fontSize: '18px',
            fontWeight: 'normal'
          },
          top: '0',
          left: '0'
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 2,
          data: this.chartData.legend
        },
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            }
          },
          data: []
        },

        series: []
      },
      chartFactor: null
    }
  },
  created() {
    // this.$on('hook:beforeDestroy', () => {
    //         window.addEventListener('resize', () => {
    //       chartFactor.resize()
    //     })
    //   })
  },
  mounted() {
    this.draw()
    window.addEventListener('resize', () => {
      this.chartFactor.resize()
    })
  },
  methods: {
    draw() {
      this.chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      let List = this.chartData.x
      let series = []
      let xData = this.chartData.y
      for (let i in List) {
        let serie = {
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          barMaxWidth: 20,
          animationDuration: 1500,
          data: this.dealData(List[i], xData[i]),
          label: {
            normal: {
              color: '#b3ccf8',
              show: false,
              // position: 'right',
              position: [0, '-15px'],
              textStyle: {
                fontSize: 13
              },
              formatter: (a, b) => {
                return a.name
              }
            }
          }
        }
        series.push(serie)
      }
      this.option.yAxis.data = xData[0]
      this.option.series = series
      this.chartFactor.setOption(this.option)
    },
    dealData(data, names) {
      let ret = []
      for (const i in data) {
        let temp = {
          color: this.color[i] + ')',
          value: data[i],
          name: names[i],
          itemStyle: {
            normal: {
              type: 'linear',
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.color[i] + ', 0.3)'
                  },
                  {
                    offset: 1,
                    color: this.color[i] + ', 1)'
                  }
                ],
                globalCoord: false
              },
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        ret.push(temp)
      }
      return ret
    }
  }
}
</script>
<style lang="scss" scoped>
.backtran {
  background-color: transparent;
}
</style>